<template>
  <yd-ls-box>
    <yd-ls-layout title="个人信息123123" :tolfurl="urls" :onfoot="false">
      <div class="yd-ls-height"></div>
      <yd-cell-group>
        <yd-cell-item class="yd-ls-info-cell-item yd-ls-me-info" arrow>
          <span slot="left">姓名</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="popupname"
            v-model="name"
            readonly
            placeholder="请填写患者的姓名"
          >
        </yd-cell-item>
        <yd-cell-item
          class="yd-ls-info-cell-item yd-ls-me-info"
          @click.native="showsex = true"
          arrow
        >
          <span slot="left">性别</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showsex = true"
            v-model="sex"
            readonly
            placeholder="请选择性别"
          >
        </yd-cell-item>
        <yd-cell-item class="yd-ls-info-cell-item yd-ls-me-info" arrow>
          <span slot="left">年龄</span>
          <yd-datetime
            startDate="1900-01-01"
            endDate="2100-12-31"
            type="date"
            v-model="age"
            initEmit
            slot="right"
          ></yd-datetime>
        </yd-cell-item>
        <yd-cell-item class="yd-ls-info-cell-item yd-ls-me-info" arrow>
          <span slot="left">地址</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showarea = true"
            v-model="address"
            readonly
            placeholder="请选择所在地区"
          >
        </yd-cell-item>
        <yd-cell-item class="yd-ls-info-cell-item" arrow>
          <span slot="left">所患疾病</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showsick = true"
            v-model="sick"
            readonly
          >
        </yd-cell-item>
      </yd-cell-group>
      <!--展示 姓名-->
      <yd-popup v-model="showname" position="right" width="100%">
        <yd-ls-popup-header
          headname="填写信息"
          btnname="确定"
          @handle-popup-back="popupback"
          @handle-popup-button="confirmName"
        ></yd-ls-popup-header>

        <yd-cell-group>
          <yd-cell-item>
            <input slot="right" type="text" placeholder="请输入真实姓名" v-model="name">
          </yd-cell-item>
        </yd-cell-group>
      </yd-popup>
      <!--展示 性别-->
      <yd-actionsheet :items="sexitem" v-model="showsex"></yd-actionsheet>
      <!--展示 地址-->
      <yd-cityselect
        v-model="showarea"
        :ready="isReady"
        :callback="areafun"
        :items="district"
        :provance="newProvance"
        :city="newCity"
      ></yd-cityselect>
      <!--展示 所患疾病-->
      <yd-popup v-model="showsick" position="right" width="100%">
        <yd-ls-popup-header headname="所患疾病" @handle-popup-back="showsick = false"></yd-ls-popup-header>
        <yd-cell-item type="radio" v-for="(items,index) in sickList" :key="index">
          <span slot="left">{{ items.disease_name }}</span>
          <input
            slot="right"
            type="radio"
            :value="items.disease_name"
            @click="chooseSick(items.pkid)"
            v-model="sick"
          >
        </yd-cell-item>
      </yd-popup>
      <div class="yd-ls-height"></div>
    </yd-ls-layout>
    <yd-ls-button btnname="保存" @handle-button="save"></yd-ls-button>
  </yd-ls-box>
</template>

<style>
.yd-ls-info-cell-item .yd-cell-left span:nth-child(2) {
  padding-right: 0.48rem;
}
.yd-ls-info-cell-item .yd-cell-left .yd-ls-info-cell-item-placeholder {
  color: #a9a9a9;
}
.yd-ls-me-info input,
.yd-ls-me-info .yd-datetime-input {
  padding-left: 0.6rem;
}
</style>
<script>
import ydLsBox from "../../components/yd-ls-box.vue";
import ydLsLayout from "../../components/yd-ls-layout.vue";
import ydLsPopupHeader from "../../components/yd-ls-popup-header.vue";
import ydLsButton from "../../components/yd-ls-button.vue";
import District from "ydui-district/dist/jd_province_city_id";
import { mapGetters } from "vuex";
import api from "../../axios/api";

export default {
  name: "info",
  data() {
    return {
      urls: "index.html#/me",
      info: {},
      sickList: {},
      sick: "",
      showsick: false,
      diseaseId: "",
      name: "",
      isname: false,
      showname: false,
      oldname: "",
      sex: "",
      showsex: false,
      sexitem: [
        {
          label: "男",
          callback: () => {
            this.sex = "男";
          }
        },
        {
          label: "女",
          callback: () => {
            this.sex = "女";
          }
        }
      ],
      age: "",
      showarea: false,
      isReady: false,
      address: "",
      newProvance: "",
      newCity: "",
      addressObj: {},
      infoList: {},
      district: District
    };
  },
  computed: {
    ...mapGetters(["getMeInfo"])
  },
  created() {
    //TODO:独立页面进入时
    if (!localStorage.openId) {
      this.$dialog.loading.open(api.default_loading_txt);
      this.getOpenid();
    } else {
      this.$dialog.loading.open(api.default_loading_txt);
      this.getInfo();
    }
  },
  methods: {
    init() {},
    getOpenid() {
      // 获取openid
      let _this = this;
      var src = window.location.search;
      var a = src.indexOf("code");
      var b = src.indexOf("&state");
      var code = src.substr(a + 5, b - (a + 5));
      this.axios({
        method: "get",
        url: api.wx_openid,
        params: {
          code: code,
          state: "STATE"
        },
        responseType: "text"
      })
        .then(rep => {
          localStorage.openId = rep.data;
          this.getAuthenticate();
        })
        .catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: "OPENID__" + JSON.stringify(err) });
        });
    },
    getAuthenticate() {
      this.axios
        .get(api.get_authenticate)
        .then(m => {
          this.getInfo();
        })
        .catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: JSON.stringify(err) });
        });
    },
    getInfo() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.axios
            .get(api.me_info)
            .then(m => {
              let me_info_data = m.data;
              this.infoList = me_info_data.data;

              this.name = this.infoList.name;
              this.oldname = this.infoList.name;
              this.age = this.infoList.age;
              this.sex = this.infoList.gender;
              this.address = this.infoList.addr;
              this.sick = this.infoList.disease_des;
              this.newProvance = this.infoList.province;
              this.newCity = this.infoList.city;
              this.isReady = true; // 初始化-选择地区
              this.getSickList();
            })
            .catch(err => {
              this.$dialog.loading.close();
              this.$dialog.alert({ mes: JSON.stringify(err) });
            });
        }, 100);
      });
    },
    getSickList() {
      this.axios
        .get(api.reg_sick_list)
        .then(m => {
          let sick_list_data = m.data;
          this.sickList = sick_list_data.data;
          this.$dialog.loading.close();
        })
        .catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: JSON.stringify(err) });
        });
    },
    popupname() {
      this.showname = true;
    },
    popupback() {
      if (!!this.isname) {
        this.name = "";
      } else {
        this.name = this.oldname;
      }
      this.showname = false;
    },
    confirmName() {
      if (!!!this.name) {
        this.notify("请填写姓名！");
        return;
      }
      this.oldname = this.name;
      this.showname = false;
    },
    areafun(ret) {
      this.address = ret.itemName1 + " " + ret.itemName2;
      this.addressObj = {
        pname: ret.itemName1,
        cname: ret.itemName2,
        pid: ret.itemValue1,
        cid: ret.itemValue2
      };
    },
    chooseSick(id) {
      this.diseaseId = id;
      setTimeout(() => {
        this.showsick = false;
      }, 100);
    },
    save() {
      if (!!!this.name) {
        this.notify("请填写姓名！");
        return;
      }
      let params = {
        mid: this.infoList.mid * 1,
        name: this.name,
        sex: this.sex,
        birthday: this.age,
        disease_id: this.diseaseId * 1 || this.infoList.disease_id,
        province_id: this.addressObj.pid * 1 || this.infoList.province_id,
        province: this.addressObj.pname || this.infoList.province,
        city_id: this.addressObj.cid * 1 || this.infoList.city_id,
        city: this.addressObj.cname || this.infoList.city,
        openId: localStorage.openId
      };
      this.$dialog.loading.open(api.default_loading_txt);
      this.axios
        .post(api.me_info_save, params)
        .then(m => {
          this.$dialog.loading.close();
          this.notify("保存成功");
        })
        .catch(err => {
          this.$dialog.loading.close();
          this.$dialog.alert({ mes: JSON.stringify(err) });
        });
    },
    notify(info) {
      this.$dialog.notify({
        mes: info,
        timeout: 1500
      });
    }
  },
  mounted() {
    this.init();
  },
  components: { ydLsBox, ydLsLayout, ydLsPopupHeader, ydLsButton }
};
</script>
